<template>
    <div class="box">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-card v-for="movie in hotMovies" :key="movie.filmId" @click="toDetail(movie.filmId)">
                <template #tags>
                    <div class="btn">
                        <van-tag plain size="large" text-color="orange" type="danger">购票</van-tag>
                    </div>
                </template>
                <template #desc>
                    <div class="desc">
                        <div>观众评分： <span class="grade">{{ movie.grade ? movie.grade : 10 }}</span></div>
                        <div class="actors">主演：{{ movie.actors | handlerActor }}</div>
                        <div>
                            <span>{{ movie.nation }}</span>
                            |
                            <span>{{ movie.runtime }}分钟</span>
                        </div>
                    </div>
                </template>
                <template #title>
                    <div class="title">{{ movie.name }}&nbsp;<span style="background-color: #D2D6DC; color: #fff; font-size: 12px;">{{
                        movie.filmType ? movie.filmType.name : '' }}</span></div>
                </template>
                <template #thumb>
                    <div class="thumb">
                        <img :src="movie.poster" width="66" />
                    </div>
                </template>
            </van-card>
        </van-list>
    </div>
</template>

<script>
import Vue from 'vue';
import { Card } from 'vant';
import { Button } from 'vant';
import { nowPlaying } from '@/request/request.js';
import { Tag } from 'vant';
import { List } from 'vant';

Vue.use(List);
Vue.use(Tag);
Vue.use(Button);
Vue.use(Card);
export default {

    data() {
        return {
            page: 1,
            total: 0,
            hotMovies: [],
            loading: false,
            finished: false,
        }
    },
    methods: {

        toDetail(id) {
            this.$router.push({ path: '/movie/moviedetail', query: { filmId: id } })

        },
        onLoad() {
            nowPlaying(this.page, this.$store.state.city.cityId).then(res => {
                this.hotMovies = [...this.hotMovies, ...res.films]
                this.total = res.total
                if (Math.ceil(this.total / 10) > this.page) {
                    this.page++
                } else {
                    this.finished = true
                }
                this.loading = false
            });
        },
    },
    filters: {
        handlerActor(actorArr) {
            if (actorArr) {
                let actors = actorArr.map(item => item.name)
                return actorArr ? actors.join(' ') : '暂无主演'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.grade {
    color: orange
}

.title {
    font-size: 16px;
    color: #191a1b
}

.docs {
    font-size: 13px;
    color: #797d79;
    margin-top: 4px;
}

.btn {
    position: absolute;
    right: 0;
    bottom: 10px;
}

.actors {
    width: 190px;
    overflow: hidden;
    /*文字超出用省略号*/
    text-overflow: ellipsis;
    /*盒子模型*/
    display: -webkit-box;
    /*显示的文本行数*/
    -webkit-line-clamp: 1;
    /*子元素的垂直排列方式*/
    -webkit-box-orient: vertical;
}

img {
    height: 88px !important;
    width: auto !important
}
</style>
